<template>
  <view class='unitPersonnelManage'>
    <ActionBar 
      :search='true' 
      @searchEvent='() => visible = true' 
      :span="'新增'" 
      @spanEvent="goto('/pages/unitPersonnelManage/operate/add/index', {'type': 'add'})" />
		<view class="operate_search" :class="visible ? 'visible' : ''">
			<view class="search_input">
				<image class='icon' src='/static/images/home/_unitPersonnelManaage/search.png'></image>
				<input @input="inputKey" placeholder="本单位人员姓名/手机号" class="input"/>
				<text class="search" @tap="refresh = !refresh">搜索</text>
			</view>
			<image class="cancel" @tap="closeSearch" src="/static/images/home/_unitPersonnelManaage/close.png"></image>
		</view>
    <view :class="visible ?  'searchResult' : ''" class='unit_list'>
      <Card
        v-for='item in unitMemberList' :key='item.id'
        :mobilePhone='item.mobilePhone' 
        logoImg='/static/images/home/_unitPersonnelManaage/personnel.png' 
        :title="'本单位人员姓名：' + item.name"
				@delete="deleteHandler(item.id)"
        @tap="goto('/pages/unitPersonnelManage/operate/index', {'type': 'view', id: item.id})">
      </Card>
			<view class="empty" v-if="showData && unitMemberList.length === 0">暂无数据</view>
    </view>
		<LoadingBar
		  :update='updating'
		  :refresh="refresh"
		  :params="{pageSize: 10, nameOrPhone: this.key}"
		  url="userlist"
		  :list="unitMemberList"
		  @bind_list="bindList"/>
  </view>
</template>
<script>
import Card from './card/index.vue'
import ActionBar from '@/common/components/actionBar/index.vue'
import LoadingBar from '@/common/components/loader/loadingBar/index.vue'
/**
   作者：jzx
   描述：订货单位人员管理组件
 */
export default {
  components: {
    Card, LoadingBar, ActionBar
  },
  data () {
    return {
			showData: false,
      visible: false,
			key: '',
			updating: false,
			refresh: false,
      pageIndex: 1, // 当前页
      pageSize: 5, // 每页数量
      unitMemberList: []
    }
  },
  onPullDownRefresh () { // 下拉刷新
		this.refresh = !this.refresh
  },
  onReachBottom () { // 上拉加载
		this.updating = !this.updating
  },
	onShow() {
		this.refresh = !this.refresh
	},
  methods: {
		inputKey(e) {
			this.key = e.target.value
		},
		bindList(list) {
			this.showData = true
			this.unitMemberList = list
		},
		closeSearch() {
			this.visible = false,
			this.key = ''
			this.refresh = !this.refresh
		},
		deleteHandler(id) {
			uni.showModal({
			  title: '温馨提示',
			  content: '确认删除？',
			  success: (res)=> {
			    if (res.confirm) {
			      this.http.POST({
			        name: 'deleteuser',
			        params: {
			          userId: id,
							}
			      }).then(res => {
			        if (res.result == 'success') {
			          uni.showToast({
			            icon: 'success',
			            title: '删除成功'
			          })
			          this.refresh = !this.refresh
			        }
			      })
			    }
			  }
			})
		}
  }
}
</script>
<style>
.unitPersonnelManage {
  background: #F5F5F5;
  min-height: 100vh;
	padding: 20upx;
}

.unitPersonnelManage .unit_list {
  width: 100%;
  overflow: auto;
  padding-top: 0upx;
  box-sizing: border-box;
}
.unit_list::-webkit-scrollbar {
  display: none;
}
.unitPersonnelManage .unit_list.searchResult {
	padding-top: 80rpx;
}

.unitPersonnelManage .operate_search {
  position: fixed;
  top: 60rpx;
	left: 0upx;
	right: 0upx;
  z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	padding: 15upx 31upx;
	border-top: 1upx solid #EEEEEE;
	visibility: hidden;
}
.unitPersonnelManage .operate_search.visible {
	visibility: visible;
}
.operate_search .search_input {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #F8F8F8;
	padding: 0upx 20upx;
	border-radius: 30upx;
	height: 60upx;
}
.operate_search .search_input .icon {
	width: 32upx;
	height: 35upx;
	margin-right: 10upx;
}
.operate_search .search_input .input {
	flex: 1;
	font-size: 28upx;
}
.operate_search .search_input .search {
	font-size: 28upx;
	padding: 0upx 30upx;
	height: 100%;
	background-color: rgba(221, 221, 221, 1);
	line-height: 60upx;
	margin-right: -20upx;
	border-bottom-right-radius: 30upx;
	border-top-right-radius: 30upx;
	color: rgba(100, 100, 100, 1);
}
.unitPersonnelManage .cancel {
	width: 28upx;
	height: 27upx;
	margin-left: 20upx;
}

.empty {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999999;
	font-size: 32upx;
}
</style>